/**
* Created by wl
* 项目管理>持有中-详情页显示信息头部
*/
<template>
    <div class="ca-box ca-p-20">
        <div class="header" v-if="!editHeader">
            <div class="header__photo">
                <div class="csLogoImgEdit">
                    <csLogoImg :item="itemHoldTopDTO.itemEntity"></csLogoImg>
                </div>
            </div>
            <div class="header__body">
                <el-row>
                    <el-col :span="4">
                        <div class="ca-p-t-10">
                            <span class="investingBtn">拟投资</span>
                            <span class="establishBtn">持有中</span>
                        </div>
                    </el-col>
                    <el-col :span="12" class="ca-p-t-10 el-wrap">
                        <h2 class="itemName">{{itemHoldTopDTO.itemEntity.itemFullname}} <span>({{itemHoldTopDTO.itemEntity.itemName}})</span></h2>
                    </el-col>
                    <el-col :span="8" class="pull-right ca-align-right">
                        <!-- <el-button type="text" class="ca-edit-btn el-icon-edit edit-btn" @click="editHeadInfo">编辑</el-button> -->
                        <el-button type="text" class="ca-p-t-0" @click="ProjectIncrease" :disabled="!isAuthIndexSee">项目增持</el-button>
                        <el-dropdown @command="showPreInvestment" v-if="fundList.length>0">
                                <el-button type="text">投前信息</el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="item in fundList" :key="item.id" :command="item.id">拟投资项目（{{item.name}}）</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button type="text" @click="editHeadInfo" :disabled="!isAuthIndexHeader">编辑</el-button>
                    </el-col>
                </el-row>
                <el-row class="ca-m-t-10 ca-clo-333">
                    <el-col :span="8" class="ca-font-size-14">
                        <span class="ca-head-name">当前估值（万元）：</span><span class="ca-color__money ca-font-size-14">{{itemHoldTopDTO.valuationAfter | format1}}</span></el-col>
                    <el-col :span="8" class="ca-font-size-14">
                            <span class="ca-head-name">总股本（万股）：</span><span class="ca-color__money ca-font-size-14">{{itemHoldTopDTO.totalCapital | format1}}</span></el-col>
                    <el-col :span="8" class="ca-font-size-14 ca-elli">
                        <span class="ca-head-name">行业：</span>
                        <span v-for="(item, index) in itemHoldTopDTO.itemIndustryEntity" :key="index" class="ca-head-name-info">{{item | getNameById('industry')}}</span>
                    </el-col>
                </el-row>
                <el-row class="ca-m-t-10 ca-clo-333">
                    <el-col :span="8" class="ca-font-size-14">
                        <span class="ca-head-name">投后负责人：</span><span class="del_01_M ca-m-r-5 ca-head-name-info" v-for="(item, index) in voteAfterUsersName" :key="index">{{item}}</span></el-col>
                    <el-col :span="16" class="ca-font-size-14 ca-elli">
                        <span class="ca-head-name">拟退出方式：</span>
                        <span class="del_01_M ca-m-r-5 ca-head-name-info" v-for="(item, index) in itemHoldTopDTO.exitEntityList" :key="index">{{item | getNameById('itemExit')}}</span>
                    </el-col>
                    <!-- <el-col :span="8" class="ca-font-size-14">
                        <span class="ca-head-name">轮次：{{prostatus | getNameById('prostatus')}}</span></el-col> -->
                </el-row>
                <el-row class="ca-m-t-10 ca-clo-333">
                    <el-col :span="24" class="ca-font-size-14">
                        <span class="ca-head-name">投后项目组成员：</span>
                            <p v-if="itemHoldTopDTO.itemGroupUsers.length > 0" class="el-left">
                                <span v-for="(val, ind) in itemHoldTopDTO.itemGroupUsers" :key="ind">
                                    <span  v-for="(item, index) in itemGroupUsersName[ind]" :key="index" class="el-name ca-m-r-5">{{item}}</span>
                                    <span class="del_01_M el-time">{{$moment(itemHoldTopDTO.itemGroupUsers[ind].groupDate).format('YYYY.MM.DD')}}<i class="el-icon-time"></i></span>
                                    <br/>
                                </span>
                            </p>

                    </el-col>
                </el-row>
            </div>
        </div>
        <ksHeader v-if="editHeader" @close="editHeader=false" @save="save"></ksHeader>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { addRemind, isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                // dialogVisible: false, //项目增持dialog
                fundList: [], //投前信息
                projectStatus: '持有中',
                editHeader: false,
                isAuthIndexSee: isNoAuth('持有中项目-项目详情-项目增持'),
                isAuthIndexHeader: isNoAuth('持有中项目-项目详情-编辑'),
                itemHoldTopDTO: {
                    exitEntityList: [], // 拟退出方式 对应ID
                    itemEntity: {
                        heldStatus: 2, //持有状态：0-潜在投资，1-拟投资，2-持有中，3-减持，4-已退出
                        id: '', //项目id
                        itemFullname: '', //项目全称
                        itemImg: '', //项目图片
                        itemInfo: '', //项目简介
                        itemName: '', //项目简称
                        itemType: 0, //项目类型：0-股权，1-债权
                    },
                    totalCapital: 0, //当前项目总股本
                    valuationAfter: 0, //当前项目估值
                    itemId: '', //项目Id
                    itemIndustryEntity: [], //行业 对应ID
                    voteAfterUsers: [], //投后负责人 对应ID
                    itemGroupUsers: [], //投后项目组成员
                },
                voteAfterUsersName: [], //投后负责人对应名字
                itemGroupUsersName: [], //投后项目组成员对应名字
                prostatus: null, //轮次
            }
        },
        watch: {
        },
        props: {
            itemId: {
                type: String,
                default: function () {
                    return '';
                }
            },
        },
        mounted() {
            this.getHeaderInfo()
        },
        methods: {
            // 项目增持
            // 投前信息
            showPreInvestment(preId) {
                this.$router.push({ name: 'pre-investment-project', params: { itemId: preId,openWindow: true}})
            },
            // 编辑头部信息
            editHeadInfo() {
                this.editHeader = true
            },
            // 获取头部信息
            async getHeaderInfo() {
                let ret = await apiHttp(api.CHECK_HEADER, {itemId: this.itemId})
                if (ret.resCode === STATUS_HTTP_SUCCESS) {
                    this.itemHoldTopDTO = ret.data
                    this.fundList = ret.data.itemQuasis
                    // 对应名字
                    this.voteAfterUsersName = []
                    this.itemGroupUsersName = []
                    ret.data.voteAfterUsers.map( item => {
                        this.$store.state.user.department.userEntityList.map( val => {
                            if (item === val.id) {
                                this.voteAfterUsersName.push(val.userName)
                            }
                        })
                    })
                    ret.data.itemGroupUsers.map((item) => {
                        let itemArr = []
                        item.userIds.map (value => {
                            this.$store.state.user.department.userEntityList.map( val => {
                                if (value === val.id) {
                                    itemArr.push(val.userName)
                                }
                            })
                        })
                        this.itemGroupUsersName.push(itemArr)
                    })
                }
            },
            async save() {
                this.editHeader = false;
                this.getHeaderInfo()
                // 添加小红点
                await addRemind({
                    dataId: this.$route.params.itemId, // 业务id
                    dataTab: 0, // tab页顺序 head 也为0 新建为'-1'
                    dataType: 2, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                });
                // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                this.$root.Dot.$emit('getDotList');
                // 添加小红点 end
            },
            // 项目增持
            ProjectIncrease() {
                this.$confirm('是否增持项目?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    showClose: false,
                }).then(async () => {
                    this.$router.push({name: 'pre-investment-project-add',params: {itemId: this.$route.params.itemId}})
                });
            },
        },
        components: {
            ksHeader: require('./add'),
            csLogoImg: require('__components/logo-img/index')//logo
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.csLogoImgEdit {
  text-align: center;
  width: 208px;
  height: 147px;
  padding-top: 15px;
  margin-bottom: 25px;
}
.edit-btn {
    float: right;
    cursor: pointer;
}
.header {
  display: flex;
  height: auto;
}
.header__photo {
  display: flex;
  height: auto;
  justify-content: center;
  margin-right: 20px;
}
.header__body {
  flex: 1;
}
.el-name {
    color: #1a85e1;
    font-size: 14px;
}
.el-time {
    font-size: 14px;
    color: #666666;
}
.el-time i {
    font-size: 14px;
    color: #666666;
    padding: 0 3px;
}
.ca-elli {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.itemName {
    font-size: 18px;
    padding-bottom: 5px;
    font-weight: normal;
    color: #333333;
}

.itemName span {
    font-size: 12px;
    font-weight: normal;
    color: #999999;
}
.ca-head-name {
    float: left;
    font-size: 14px;
    color: #666666;
}
.ca-head-name span {
    font-size: 14px;
    color: #666666;
}
.ca-head-name-info {
    font-size: 14px;
    color: #333333;
}
.el-left {
    float: left;
    margin-left: 10px;
}
.el-blue {
    font-size: 14px;
    color: #389bef;
}
.establishBtn,.investingBtn{
    display: inline-block;
    width: 52px;
    height: 24px;
    color:#fff;
    line-height:24px;
    text-align: center;
}
.investingBtn{
    background-color: #999;
}
.establishBtn{
    background-color: #f19149;
}
.el-center{
    text-align: center;
}
.el-wrap {
    word-wrap:break-word;
}
</style>
